<template>
  <a-row type="flex">
    <a-col :span="4" :order="1" class="col_item">{{ $t('贷款用途') }}</a-col>
    <a-col :span="8" :order="2" class="col_item">{{ data.loanUse }}</a-col>
    <a-col :span="4" :order="3" class="col_item">{{ $t('学历') }}</a-col>
    <a-col :span="8" :order="4" class="col_item">{{ data.degree }}</a-col>
  </a-row>
  <a-row type="flex">
    <a-col :span="4" :order="1" class="col_item">{{ $t('公司名称') }}</a-col>
    <a-col :span="8" :order="2" class="col_item">{{ data.companyName }}</a-col>
    <a-col :span="4" :order="3" class="col_item">{{ $t('身份') }}</a-col>
    <a-col :span="8" :order="4" class="col_item">{{ data.workType }}</a-col>
  </a-row>
  <a-row type="flex">
    <a-col :span="4" :order="1" class="col_item">{{ $t('每月净收入') }}</a-col>
    <a-col :span="8" :order="2" class="col_item">{{ data.incomeNum }}</a-col>
    <a-col :span="4" :order="3" class="col_item">{{ $t('电子邮箱') }}</a-col>
    <a-col :span="8" :order="4" class="col_item">{{ data.mail }}</a-col>
  </a-row>
  <a-row type="flex">
    <a-col :span="4" :order="1" class="col_item">{{ $t('婚姻状况') }}</a-col>
    <a-col :span="8" :order="2" class="col_item">{{ data.maritalStatus }}</a-col>
    <a-col :span="4" :order="3" class="col_item">{{ $t('孩子') }}</a-col>
    <a-col :span="8" :order="4" class="col_item">{{ data.childrenNum }}</a-col>
  </a-row>

</template>

<script>
import {reactive, watch,ref} from "vue"

export default {
  name: "index",
  props: {
    userInfo: {}
  },
  setup(props) {
    const data = ref({})
    watch(() => props.userInfo.value, (value) => {
      data.value = value
    })
    return {
      data
    }
  }
}
</script>

<style scoped>
.col_item {
  line-height: 45px;
  border: 1px solid #eeeeee;
  text-align: center;
}

.col_item2 {
  border: 1px solid #eeeeee;
  text-align: center;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

}
</style>
